<div class="teacher-comment-wrap">
  <div class="title">老师点评</div>
  <div class="teacher-info">
    <img src="{{env('CDN_RESOURCE')}}/mobile/report/img/avatar.png">
    <p>Elizabeth Schwartz</p>
  </div>
  <div class="teacher-audio">
    <audio id="teacher-audio" src="https://static-app.97kid.com/wx/song.mp3" preload></audio>
    <div id="audio-play" class="audio-play">
      <img id="play-icon" src="{{env('CDN_RESOURCE')}}/mobile/report/icon/ic_play.png">
    </div>
    <div class="audio-progress">
      <div id="current-progress" class="current-progress"></div>
    </div>
    <div id="audio-time" class="audio-time"></div>
    <script type="text/javascript">
      $(function(){
        var audio = document.getElementById("teacher-audio"),
          audioPlay = document.getElementById("audio-play"),
          playIcon = document.getElementById("play-icon"),
          currentProgress = document.getElementById("current-progress"),
          audioTime = document.getElementById("audio-time");

        // 设置播放按钮监听
        audioPlay.addEventListener('click', function () {
          if (!audio.paused) stop();
          else play()
        });
        // 等待媒体元数据加载完毕
        audio.addEventListener('loadedmetadata', function () {
          // 设置音频总时长
          audioTime.innerText = parseInt(audio.duration) + 's';
        })
        // 更新播放进度
        audio.addEventListener('timeupdate', function () {
          currentProgress.style.transition = 'width 0.5s';
          currentProgress.style.width = (audio.currentTime * 100 / audio.duration) + '%';
          var time = parseInt(audio.duration - audio.currentTime)
          if (time > 0) audioTime.innerText = time + 's';
        });
        // 音频播放结束
        audio.addEventListener('ended', function () {
          currentProgress.style.width = '100%';
          currentProgress.style.transition = '';
          audioTime.innerText = '0s';
          setTimeout(() => {
            stop();
          }, 500);
        });
        function stop () {
          audio.pause();
          audio.currentTime = 0;
          audioTime.innerText = parseInt(audio.duration) + 's';
          playIcon.src = CDN_RESOURCE + '/mobile/report/icon/ic_play.png';
        }
        function play () {
          audio.play();
          playIcon.src = CDN_RESOURCE + '/mobile/report/icon/ic_stop.png';
        }
      });
    </script>
  </div>
  <div class="teacher-comment">
    <p class="en">There is a moment in the life of any aspiring as tronomer that it is time to buy that first tele sc
      ope. telescope geeks. </p>
    <p class="cn">我们现在正在打造爆款期间，所有的产品都是低价销售赚信誉的，您看中的这款是我们现在限时折扣销售的，现在是全网最低价在销售的。</p>
  </div>
  <div class="translate-btn" id="translate-btn">
    <img class="translate-icon" src="{{env('CDN_RESOURCE')}}/mobile/report/icon/ic_translate.png">
    <span class="translate">翻译</span>
    <script type="text/javascript">
      $('#translate-btn').on('click', function () {
        $('.teacher-comment > .cn').css('display', 'block');
        $(this).css('display', 'none');
      });
    </script>
  </div>
</div>